<template>
  <ga-tabs type="card-gutter" v-model:active-key="activeKey">
    <ga-tab-pane key="k8s" title="K8s服务">
      <div class="app_content">
        <ga-table-tool
          placeholder="按名称搜索"
          @handleSearch="fetchK8sData"
          @handleRefresh="fetchK8sData"
        />
        <ga-table
          row-key="id"
          :loading="loading"
          :pagination="true"
          :columns="k8sColumns"
          :data="k8sData"
          :bordered="false"
          :hoverable="false"
          :filter-icon-align-left="true"
        >
        </ga-table>
      </div>
    </ga-tab-pane>
    <ga-tab-pane key="pod" title="POD">
      <div class="app_content">
        <ga-table-tool
          placeholder="按名称搜索"
          @handleSearch="fetchPodData"
          @handleRefresh="fetchPodData"
        />
        <ga-table
          row-key="id"
          :loading="loading"
          :pagination="true"
          :columns="podColumns"
          :data="podData"
          :bordered="false"
          :hoverable="false"
          :filter-icon-align-left="true"
        >
        </ga-table>
      </div>
    </ga-tab-pane>
    <ga-tab-pane key="container" title="容器"> </ga-tab-pane>
  </ga-tabs>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import useLoading from "@/utils/loading";
import { k8sColumns, podColumns } from "./k8sColumn.js";
import { getK8sList } from "@/api/k8s.js";
import { getPodList } from "@/api/pod.js";
import { useRoute } from "vue-router";
const { loading, setLoading } = useLoading(false);
import { MsToDays } from "@/utils/day.js";

const activeKey = ref("k8s");
const visible = ref(false);

const route = useRoute();
const { systemId } = route.query;
const k8sData = ref([
  {
    serviceName: "",
    state: "",
    masterIp: "",
    namespace: "",
    workload: "",
    serviceIp: "",
    endPoint: "",
    podCount: "",
    runTime: "",
  },
]);
const k8sQuery = ref({
  systemId: "",
  from: "2024-09-05 09:48:33",
  to: "2024-09-05 10:48:33",
});
const podQuery = ref({
  iplike: "",
  nodeName: "",
  phase: "",
  podName: "",
  status: "",
  workLoadName: "",
  systemId: "",
});

onMounted(() => {
  k8sQuery.value.systemId = systemId;
  podQuery.value.systemId = systemId;
  fetchK8sData();
  fetchPodData();
});

const fetchK8sData = async () => {
  setLoading(true);
  try {
    const { data, code } = await getK8sList(k8sQuery.value);
    if (code === 20000) {
      k8sData.value = data.map((item) => ({
        serviceName: item.serviceName,
        state: item.state,
        masterIp: item.masterIp,
        namespace: item.namespace,
        workload: item.workload,
        serviceIp: item.serviceIp,
        endPoint: item.endPoint,
        podCount: item.podCount,
        runTime: timeDiff(item.createTime, item.updateTime),
      }));
    }
  } catch (err) {
  } finally {
    setLoading(false);
  }
};

//k8s侧弹框
const handleClick = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

const timeDiff = (createTime, updateTime) => {
  const dayjs = require("dayjs");
  const duration = require("dayjs/plugin/duration"); // 引入duration插件用于计算时间差

  // 加载duration插件
  dayjs.extend(duration);

  // 解析时间字符串为dayjs对象
  const startTime = dayjs(createTime);
  const endTime = dayjs(updateTime);

  // 计算时间差（毫秒）
  const diffInMillis = endTime.diff(startTime, "millisecond");
  return MsToDays(diffInMillis);
};

const fetchPodData = async () => {
  setLoading(true);
  try {
    const { data, code } = await getPodList(podQuery.value);
    console.log("data", data);
  } catch (err) {
  } finally {
    setLoading(false);
  }
};
</script>

<style lang="scss" scoped>
:deep(.garco-tabs-nav-tab, .garco-tabs-tab:hover) {
  background: #fff !important;
}

:deep(
    .garco-tabs-nav-type-card-gutter .garco-tabs-tab-active,
    .garco-tabs-nav-type-card-gutter .garco-tabs-tab-active:hover
  ) {
  background-color: #fff !important;
  border-bottom-color: var(--color-bg-2);
  border-top-color: rgb(var(--primary-6));
  border-top-width: thick;
}

:deep(.garco-tabs-content) {
  border: none;
  border-top: none;
}

.text {
  border-radius: 0;
}

.text:hover {
  border-bottom: 1px solid #0f5ef7;
}
</style>
